<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %><%@
include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>中国车友会</title>
<meta name="keywords" content="中国车友会" />
<meta name="description" content='中国车友会'/>
<meta name="author" content="YangMing_gz DengFeiCui_gz"/>
<link rel="stylesheet" type="text/css" href="http://www1.pcauto.com.cn/zt/gz20141224/wap/createclub/css/step2.css">
</head>
<body>
<!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7474" />
        </jsp:include>
<div class="g-doc">
	<div class="g-hd">
		<script type="text/javascript" src="http://www.pcauto.com.cn/global/wap/1411/intf6047.html"></script>
		<div class="m-nav">
			<a href="javascript:history.go(-1);" class="u-hd-prev" ></a>
			<div class="u-hd-mark">
				创建车友会
			</div>
			<a href="${WAPROOT}/club/createClubQuestionPage.do" class="u-hd-sub-mark">
				常见问题
			</a>
		</div>
	</div>
	<div class="g-bd">
		<c:choose>
			<c:when test="${!empty joinedClubTips }">
				<div class="m-tips">
					<p>${joinedClubTips }</p>
					<p>
						<a href="http://m.pcauto.com.cn/club/">返回车友会首页</a>
					</p>
				</div>
			</c:when>
			<c:otherwise>
				<div class="m-step">
					<img src="http://www1.pcauto.com.cn/zt/gz20141224/wap/createclub/imgs/m-step-2.png" alt="" />
				</div>
				<form id="applyForm" method="post" action="${WAPROOT}/club/createClubStep2Action.do" >
				<div class="m-form">
					<ul>
						<li>
							<i class="u-name">
							真实姓名：
							</i>
							<i class="u-ipt">
								<input type="text" class="ipt" value="" placeholder="请输入名称" id="name" name="name"/>
							</i>
							<i class="u-icon">*</i>
						</li>
						<li>
							<i class="u-name">
							性别：
							</i>
							<i class="u-sel">
								<select id="gender" name="gender" class="selected">			 
									<c:choose>
									  <c:when test="${user.gender == 0 }">
									     <option value="0" selected="selected">男</option>
										 <option value="1">女</option>
									  </c:when>
									  <c:when test="${user.gender == 1 }">
									     <option value="0">男</option>
										<option value="1" selected="selected">女</option>
									  </c:when>
									  <c:otherwise>
									       <option value="0" selected="selected">男</option>
										   <option value="1">女</option>
									  </c:otherwise>
									</c:choose>
								</select>
							</i>
						</li>
						<li>
							<i class="u-name">
							手机号码：
							</i>
							<i class="u-ipt">
								<input type="text" class="ipt" value="" placeholder="请输入手机号码" id="phone_temp"/>
								<input type="hidden" value="" name="phone" id="phone" />
							</i>
							<i class="u-icon">*</i>
						</li>
						<li>
							<i class="u-name">
							验证码：
							</i>
							<i class="u-ipt">
								<input type="text" class="ipt" value="" id="code" name="code"/>
							</i>
							<i class="u-icon">*</i>
							<i><a href="javascript:" class="get-code" id="J-get-code" onclick="sendVerificationCode();">获取验证码</a></i>
							<span class="time-count">60秒后重新发送</span>
							<input type="hidden" value="60" id="timeInterval"/>
						</li>
					</ul>
					<input type="hidden" name="postcode" id="postcode" />
					<input type="hidden" name="address" id="address" />
					<input type="button" value="提交申请" class="u-btn-sub" id="J-btn-sub"/>
				</div>
				</form>
			</c:otherwise>
		</c:choose>
	</div>
	<div class="g-ft">
		<script src="http://www.pcauto.com.cn/3g/wap2013/intf/1303/intf1567.js" type="text/javascript" charset="utf-8"></script>
	</div>
</div>

<script type="text/javascript" src="${UCROOT}/js/jquery.js"></script>
<script src="${ROOT}/js/jQuery.windowName.plugin2.js"></script>
<script type="text/javascript">
/******自定义封装 begin ******/

//从个人中心获取用户相关资料
function initFormData(){
	$.getJSON("${UCROOT}/intf/getAddressByUser.jsp?callback=?",{userId:${user.uid}},function(data){
        if(data.code==0){
        	if(data.realName == "") {
        		$("#name").val("${user.truename }");
        	}else {
        		$("#name").val(data.realName);
        	}
        	$("#address").val(data.address);
        	$("#postcode").val(data.postcode);
        	if(data.telephone == "") {
        		$("#phone_temp").val("${user.phone }");
                $("#phone").val("${user.phone }");
        	}else {
        		$("#phone_temp").val(data.telephone);
    	        $("#phone").val(data.telephone);
        	}
	        
        }else{
            $("#name").val("");
            $("#address").val("");
            $("#postcode").val("");
            $("#phone_temp").val("");
            $("#phone").val("");
        }
    });
}

initFormData();

var packFn={
	getId: function(id) {
		return document.getElementById(id);
	},
	getElem: function(elem) {
		return document.querySelector(elem);
	},
	show: function(obj) {
		obj.style.display = "block";
	},
	hide: function(obj) {
		obj.style.display = "none";
	},
	touchEvent:function(elm,fn) {

		if ("ontouchstart" in document.documentElement) {
			elm.addEventListener("touchstart",fn,false);
		}else {
			elm.addEventListener("click",fn,false);
		}
	}
}
/******自定义封装 end ******/

/******提示信息 begin ******/
var redBorder = "border-red";
//显示提示信息
function showTopTip(msg) {
	var tipEle = document.getElementById("JtopTipMsg");
	if (!tipEle) {
		tipEle = document.createElement("div");
		tipEle.id = "JtopTipMsg";
		tipEle.style.cssText = "display:none;width:190px;padding:10px;line-height:30px;font-size:16px;background-color:rgba(000,000,000,0.5);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#fff;text-align:center;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;position:fixed;top:50%;left:50%;margin-left:-95px;margin-top:-25px;opacity:1;z-index:999;";
		document.body.appendChild(tipEle);
	}
	tipEle.innerHTML = msg;
	tipEle.style.display = "block";
	setTimeout(function() {
		tipEle.style.opacity = "1";
	}, 0);
}
//隐藏提示信息
function hideTopTip() {
	var tipEle = document.getElementById("JtopTipMsg");
	if (tipEle) {
		setTimeout(function() {
			tipEle.style.opacity = "0";
			setTimeout(function() {
				tipEle.style.display = "none";
			}, 300);
		}, 1500);
	}
}

function getTip(tip_txt){
	showTopTip(tip_txt);
	hideTopTip();
}
/******提示信息 end ******/

/******验证 begin ******/
var subBtn=packFn.getId('J-btn-sub'),
	 realName=packFn.getId('name'),
	 sex=packFn.getId('gender'),
	 tel=packFn.getId('phone'),
	 code=packFn.getId('code'),
	 getCode=packFn.getId('J-get-code');

subBtn.addEventListener('click',function(){
	$('#phone').val($('#phone_temp').val());
	if(realName.value==''){
		getTip('请填写真实姓名');
		$("#name").parent().parent().addClass(redBorder);
		return false;
	}else{
		if($("#name").parent().parent().attr("class")){
			$("#name").parent().parent().removeAttr("class");
		}
	}
	
	if(sex.value==''){
		getTip('请选择性别');
		$("#gender").parent().parent().addClass(redBorder);
		return false;
	}else{
		if($("#gender").parent().parent().attr("class")){
			$("#gender").parent().parent().removeAttr("class");
		}
	}
	
	if(tel.value==''){
		getTip('请填写正确的手机号');
		$("#phone").parent().parent().addClass(redBorder);
		return false;
	}else{
		var  regPhone=/^1[3|5|7|8]\d{9}$/,
		 isRight=regPhone.test(tel.value);
		 if(isRight==false){
			getTip('请填写正确的手机号');
			$("#phone").parent().parent().addClass(redBorder);
			return false;
		 }else{
			if($("#phone").parent().parent().attr("class")){
				$("#phone").parent().parent().removeAttr("class");
			}
		 }
	}
	
	if(code.value==''){
		getTip('请填写验证码');
		$("#code").parent().parent().addClass(redBorder);
		return false;
	}else{
		if($("#code").parent().parent().attr("class")){
			$("#code").parent().parent().removeAttr("class");
		}
	}
	//验证通过
	$.ajax({
        url:$("#applyForm").attr("action"),
        data:$("#applyForm").serialize(), 
        dataType:"json",
        type:"post",
        success:function(rs,textStatus){
            if(rs.statusCode==-1){
            	var field = rs.field;
            	$("li[class=border-red]").removeClass();
            	if(field == "name"){
            		$("#name").parent().parent().addClass(redBorder);
            	}else if(field == "gender"){
            		$("#gender").parent().parent().addClass(redBorder);
            	}else if(field == "phone"){
            		$("#phone").parent().parent().addClass(redBorder);
            	}else if(field == "code"){
            		$("#code").parent().parent().addClass(redBorder);
            	}
            	getTip(rs.message);
            }else{
                //window.location.href="${ROOT}/wap/club/applyCreateClubForAddressToPage.do";
            	window.location.href="${WAPROOT}/club/createClubSuccessPage.do";
            }                    
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
        	getTip("创建车友会失败");
        }
    });

}, false);
/******验证 end ******/

/******分享 begin ******/
var WXShare = function(title,desc,img,width,height,url,appid){
	//初始化参数
	img=img||'';
	width=width||100;
	height=height||100;
	title=title||document.title;
	desc=desc||document.title;
	url=url||document.location.href;
	appid=appid||'';
	//微信内置方法
	function _ShareFriend() {
		WeixinJSBridge.invoke('sendAppMessage',{
			'appid': appid,
			'img_url': img,
			'img_width': width,
			'img_height': height,
			'link': url,
			'desc': desc,
			'title': title
		}, function(res){
			_report('send_msg', res.err_msg);
		})
	}
	function _ShareTL() {
		WeixinJSBridge.invoke('shareTimeline',{
			'img_url': img,
			'img_width': width,
			'img_height': height,
			'link': url,
			'desc': desc,
			'title': title
		}, function(res) {
			_report('timeline', res.err_msg);
		});
	}
	function _ShareWB() {
		WeixinJSBridge.invoke('shareWeibo',{
			'content': desc,
			'url': url,
		}, function(res) {
			_report('weibo', res.err_msg);
		});
	}
	document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
		WeixinJSBridge.on('menu:share:appmessage', function(argv){
			_ShareFriend();
		});
		// 分享到朋友圈
		WeixinJSBridge.on('menu:share:timeline', function(argv){
			_ShareTL();
		});
		// 分享到微博
		WeixinJSBridge.on('menu:share:weibo', function(argv){
			_ShareWB();
		});
	}, false);
}


var API_ROOT='${PASSPORTROOT}/api';
//-----------------------------------------提交------------------
var options = {
    windowname:1,//跨域必须
    withCookie: true,
    cache: false,
    type: 'POST',
    timeout: 100000,
    error: function(xhr) {
        if (xhr.status > 0) {
            $('#submitButton').attr('disabled',false);
            alert('Error: ' + xhr.status + ' ' + xhr.statusText);
        }
    }
};
var retCheck = true;
//发送验证码
function sendVerificationCode() {
	$('#phone').val($('#phone_temp').val());
    if(retCheck){
        var mobile = $("#phone").val();
        if(mobile != null) {
            mobile = $.trim(mobile);
        }
        if(!(/^(13|14|15|18|17)[0-9]{9}$/.test(mobile))){
        	getTip("请输入正确的手机号");
            $("#phone_temp").focus(); 
            return false; 
        } 
/*         else {
            $("#J-get-code").text('验证码发送中...');
            retCheck = false;
        } */ 
        $.getJSON("${WAPROOT}/club/getVCodeKey.do",{},function(data){
            if(data.code==0){
                var vCodeKey = data.vCodeKey;
                var vCodeTime = data.vCodeTime;
                $.ajax({
                    type: "POST",
                    url: "${PASSPORTROOT}/api/sendVerificationCode.jsp?type=autoClub&act=getPassword&mobile=" + mobile + "&vCodeKey="+vCodeKey+"&VCodeTime="+vCodeTime,
                    data: "{}",
                    dataType: "JSON",
                    success: function (returnStr) {
                        returnStr = returnStr.replace(/\n|\r/g,'');
                        var data = eval("("+returnStr+")"); //转换为json对象 
                        if(data.code == undefined) {//如果返回没有code信息当做失败处理
                             getTip("验证码发送失败，请稍后重新点击发送");
                            $("#J-get-code").text("获取验证码");
                            retCheck = true;
                        } else if(data.code == 0){
                        	getTip("验证码已发送到您的手机");
                            setVerificationInvalid();
                        }  else {
                            if(data.code == -1 || data.code == -2) {
                            	getTip(data.message);
                            }
                            $("#J-get-code").text("获取验证码");
                            retCheck = true;
                        }
                    },
                    error: function() {//处理接口异常情况
                    	getTip("验证码发送失败，请稍后重新点击发送");
                    	 $("#J-get-code").text("获取验证码");
                        retCheck = true;
                    }
                });
            }else{
            	getTip("发送失败");
            }
        });
    }
} 

//设置验证码失效时间,60内有效
function setVerificationInvalid() {
    var timeInterval = $("#timeInterval").val();
    var minute = parseInt(timeInterval);
    // 如果秒数还是大于0，则表示倒计时还没结束
    if(minute > 0) {
        // 时间减一 按钮里的内容呈现倒计时状态
        $("#timeInterval").val(--minute);
        $(".time-count").css("display", "block");
        $("#J-get-code").hide();
        $(".time-count").text(minute + "秒后重新发送");
        // 一秒后重复执行
        setTimeout(function(){setVerificationInvalid();},1000);
        // 否则，按钮重置为初始状态
    }else{
        $("#timeInterval").val(60);
        $(".time-count").css("display", "none");
        $("#J-get-code").show();
        retCheck = true;
    }  
}
/*
var shareTitle = '',
shareDesc = '',
shareImg = '';

WXShare(shareTitle,shareDesc,shareImg);
*/

/******分享 end ******/
</script>
</body>
</html>

